<template>
  <div class="app">
    <h1>Vue3 Antd Dynamic Form - 开发测试</h1>
    <div class="demo-section">
      <h2>基础表单示例</h2>
      <DynamicForm 
        :schema="basicSchema" 
        v-model="formData" 
        @submit="handleSubmit"
        @change="handleChange"
      />
    </div>
    
    <div class="demo-section">
      <h2>表单数据</h2>
      <pre>{{ JSON.stringify(formData, null, 2) }}</pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { DynamicForm } from './index.js'

// 表单数据
const formData = ref({})

// 基础表单配置
const basicSchema = [
  {
    field: 'name',
    label: '姓名',
    type: 'input',
    placeholder: '请输入姓名',
    rules: [{ required: true, message: '请输入姓名' }]
  },
  {
    field: 'email',
    label: '邮箱',
    type: 'input',
    placeholder: '请输入邮箱',
    rules: [
      { required: true, message: '请输入邮箱' },
      { type: 'email', message: '请输入正确的邮箱格式' }
    ]
  },
  {
    field: 'age',
    label: '年龄',
    type: 'number',
    placeholder: '请输入年龄',
    rules: [{ required: true, message: '请输入年龄' }]
  },
  {
    field: 'gender',
    label: '性别',
    type: 'radio',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' }
    ],
    rules: [{ required: true, message: '请选择性别' }]
  },
  {
    field: 'hobbies',
    label: '爱好',
    type: 'checkbox',
    options: [
      { label: '阅读', value: 'reading' },
      { label: '运动', value: 'sports' },
      { label: '音乐', value: 'music' }
    ]
  },
  {
    field: 'city',
    label: '城市',
    type: 'select',
    placeholder: '请选择城市',
    options: [
      { label: '北京', value: 'beijing' },
      { label: '上海', value: 'shanghai' },
      { label: '广州', value: 'guangzhou' }
    ]
  },
  {
    field: 'description',
    label: '描述',
    type: 'textarea',
    placeholder: '请输入描述',
    rows: 4
  }
]

// 处理表单提交
const handleSubmit = (values) => {
  console.log('表单提交:', values)
  alert('表单提交成功！')
}

// 处理表单变化
const handleChange = (values) => {
  console.log('表单数据变化:', values)
}
</script>

<style scoped>
.app {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.demo-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
}

.demo-section h2 {
  margin-top: 0;
  color: #1890ff;
}

pre {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
}
</style> 